<template>
  <div id="program-list">
    <div style="padding:5px">
      <header>
        <div class="inner-left">
          <!-- <el-input size="medium"
                    placeholder="关键字"
                    style="margin:0 5px;"
                    v-model="searchText"></el-input>
          <el-button-group style="display:flex">
            <el-button icon="el-icon-search"
                       style="padding: 10px 12px;"
                       size="medium">搜索</el-button>
            <el-button icon="el-icon-arrow-down"
                       style="padding: 10px 12px;"
                       size="medium"></el-button>
          </el-button-group> -->
        </div>
        <!-- <el-button-group>
          <el-button icon="el-icon-edit"
                     style="padding: 10px 12px;"
                     size="medium">导入</el-button>
          <el-button icon="el-icon-share"
                     style="padding: 10px 12px;"
                     size="medium">导出</el-button>
        </el-button-group> -->
        <!-- <batchTag :number="selections.length"
                  @delete="handleDelete"></batchTag> -->
      </header>
      <main>
        <el-table :data="tableData"
                  header-cell-class-name="table-header"
                  border
                  @selection-change="handleSelectionChange"
                  style="width: 100%">
          <el-table-column type="selection"
                           align="center"
                           width="55">
          </el-table-column>
          <el-table-column type="index"
                           show-overflow-tooltip
                           align="center"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="name"
                           show-overflow-tooltip
                           align="center"
                           sortable
                           label="名称">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.name" />
              </div>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type"
                           sortable
                           align="center"
                           width="100"
                           label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-select v-model="addObj.typeCode"
                           style="width:100%;">
                  <el-option v-for="p in programType.type"
                             :key="p.value"
                             :label="p.label"
                             :value="p.value"></el-option>
                </el-select>
              </div>
              <span v-else>{{programType.formatType(scope.row.typeCode)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="length"
                           show-overflow-tooltip
                           align="center"
                           sortable
                           label="时长">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.length"
                          maxlength="3"
                          oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                          placeholder="请输入整数分钟">
                  <i slot="suffix"
                     style="line-height:40px">分钟</i>
                </el-input>
              </div>
              <span v-else>{{scope.row.length}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           show-overflow-tooltip
                           sortable
                           align="center"
                           label="简介">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.introduction" />
              </div>
              <span v-else>{{scope.row.introduction}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           show-overflow-tooltip
                           sortable
                           align="center"
                           label="演职人员">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.extraActor" />
              </div>
              <span v-else>{{scope.row.extraActor}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           width="100"
                           label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.editRow && tabEdit">
                <el-button type="text"
                           size="mini"
                           @click="handleSave">保存</el-button>
                <el-button size="mini"
                           type="text"
                           @click="handleCancel">取消</el-button>
              </span>

              <el-button v-else
                         type="text"
                         @click="handleTabEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </main>
      <footer>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-plus"
                   @click="handleAdd">新增</el-button>
        <el-button type="danger"
                   :disabled="selections.length===0"
                   size="small"
                   icon="el-icon-delete"
                   @click="handleDelete">删除</el-button>
      </footer>
    </div>
    <el-dialog title="片段编辑"
               width="450px"
               :visible.sync="visible"
               @close="resetForm">
      <el-form label-width="80px">
        <el-form-item v-if="id"
                      label="序号">
          <el-input v-model="addObj.number"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addObj.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addObj.typeCode"
                     style="width:100%;">
            <el-option v-for="p in programType.type"
                       :key="p.value"
                       :label="p.label"
                       :value="p.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时长">
          <el-input v-model="addObj.length"
                    maxlength="3"
                    oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                    placeholder="请输入整数分钟">
            <i slot="suffix">分钟</i></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="addObj.introduction"></el-input>
        </el-form-item>
        <el-form-item label="演职人员">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="addObj.extraActor"></el-input>
        </el-form-item>
        <el-row style="text-align:right">
          <el-button size="small"
                     type="primary"
                     @click="handleSubmit">提交</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import mixin from './mixin/mixin'
import API from '../../../api/show'
import programType from '../../../types/programType'

export default {
  mixins: [mixin],
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    node: {
      default: () => ({}),
      type: Object
    }
  },

  data() {
    return {
      programType: programType,
      id: '',
      addObj: {
        name: '',
        type: '',
        length: '',
        introduction: ''
      }
    }
  },
  methods: {
    submitPart() {
      const param = {
        ...this.addObj,
        programId: this.node.nodeId,
        type: this.programType.formatType(this.addObj.typeCode)
      }
      API.savePartByProgramId(param).then(res => {
        this.$parent.queryPartByNodeId({ data: { id: this.node.nodeId } })
      })
    },
    delete() {
      const param = {
        ids: this.selections.map(s => s.id).join(','),
        programId: this.node.nodeId,
      }
      API.deletePart(param).then(res => {
        this.$parent.queryPartByNodeId({ data: { id: this.node.nodeId } })
      })
    },
    handleTabEdit(row) {
      if (this.tabEdit) {
        this.handleCancel()
      }
      this.visible = true
      this.addObj = { ...row }
    },
    handleSubmit() {
      API.updatePart(this.addObj).then(res => {
        this.visible = false
        this.$parent.queryPartByNodeId({ data: { id: this.node.nodeId } })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#program-list {
  width: 100%;
  height: 100%;
  @import "./scss/common.scss";
}
</style>
